<template>
  <div id="box">
    <h1 class="header">搜索用户</h1>
    <input type="text" v-model="input" class="input" />
    <button class="btn" @click="axiosTodo">搜索</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Users",
  data() {
    return {
      input: "",
    };
  },

  methods: {
    async axiosTodo() {
      //发送请求时判断是否为空
      if (!this.input.trim()) {
        alert("请输入内容");
        return;
      }
      //将loading显示出来
      this.$bus.$emit("TabDone", true);

      const res = await axios({
        method: "GET",
        url: "https://api.github.com/search/users",
        params: {
          // querystring参数
          q: this.input,
        },
      });
      // console.log(res.data.items);
      let newArr = res.data.items;
      //avatar_url(图像) id  login(名称)  html_url(仓库首页)
      newArr = newArr.map((item) => {
        return {
          avatar_url: item.avatar_url,
          id: item.id,
          login: item.login,
          html_url: item.html_url,
        };
      });
      // console.log(newArr);

      //处理好数据将数据传递给展示组件
      this.$bus.$emit("addList", newArr);
      //数据传递成功再改变状态
      this.$bus.$emit("TabDone", false);
    },
  },
};
</script>

<style>
#box {
  margin-bottom: 30px;
  background-color: rgb(241, 245, 246);
  text-align: center;
}

.header {
  line-height: 70px;
  font-size: 26px;
  color: skyblue;
}
.input {
  width: 300px;
  line-height: 30px;
  border: 1px solid red;
  outline: none;
  font-size: 20px;
}
.btn {
  width: 60px;
  line-height: 30px;
  border: 1px orange solid;
  background-color: orange;
  vertical-align: bottom;
  color: white;
}
.btn:active {
  color: skyblue;
}
</style>